<template>
  <view class="content">
    <lunc-calendar
      class="calendar"
      ref="calendar"
      :showLunar="false"
      :showMonthBg="false"
      :showShrink="false"
      :signList="month_records"
      @dayChange="dayChange"
      weekType=""
      @monthChange="monthChange"
    />

    <div
      style="
        margin: 0px 0;
        text-align: left;
        display: flex;
        width: 100%;
        justify-content: space-between;
      "
    >
      <span
        style="width: 200px; margin-left: 10px; height: 40px; line-height: 40px"
        >{{curr_day}}</span
      >
      <view>
        <!-- <u-button
          v-if="record_pictures.length > 0"
          style="width: 100px; border-radius: 2px; margin: 0 10px"
          @click="clickbutton"
          >天气</u-button
        > -->
        <u-button
          v-if="record_pictures.length > 0"
          style="width: 100px; border-radius: 2px; margin: 0 10px"
          @click="clickbutton"
          >修改记录</u-button
        >
      </view>
    </div>
    <div v-if="record_pictures.length == 0" style="width: 100%">
      <u-button style="width: 140px" @click="clickbutton"
        >点击添加记录</u-button
      >
    </div>
    <div v-else style="display: flex; flex-direction: row; align-content: flex-start; flex-wrap: wrap;">
		<view v-for="(item, index) in record_pictures" :key="index" style="margin-top: 20px;">
			<image :src="item.main_image" mode="aspectFit" style="width: 100px; height: 100px"></image>
			<view style="width: 100px; text-align: center;">{{item.name}}</view>
		</view>
    </div>
  </view>
</template>

<script>
import clothes from "@/api/clothes.js";

export default {
  data() {
    return {
		  curr_day: "",
      month_records: [],
      record_pictures: [],

      todayInfo: [],
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow: function() {
    this.loadData();
  },
  methods: {
    loadData() {
      let today = new Date();
    
      //日期转为格式：2024-11-25
      let year = today.getFullYear();
      let month = today.getMonth() + 1;
      let day = today.getDate();
      // 补零
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      let date = year + "-" + month + "-" + day;
      
		let year_month = year + "-" + month;

if(this.curr_day.length > 0) {
	date = this.curr_day;
  year_month = date.substring(0, 7);
}

		this.getDayRecord(date)
		this.curr_day = date;
		this.get_month_record(year_month)
    },
	get_month_record(year_month) {
		let data = {
			year_month: year_month
		};
		let month_records = [];
		clothes.get_month_record(data).then((res) => {
			res.forEach((item) => {
				month_records.push({
					date: item,
					title: "",
					info: ""
				});
			});
			this.month_records = month_records;
		}).catch((res) => {
			console.log(res);
		});
	},
	getDayRecord(date) {
		let data = {
			date: date
		};
		clothes.get_day_record(data).then((res) => {
			let pictures = [];
			res.clothing.forEach((item) => {
				if (item.main_image) {
					item.main_image = this.$getBaseUrl() + item.main_image;
				}
				pictures.push(item);
			});
			this.record_pictures = pictures; //衣服
		}).catch((res) => {
			console.log(res);
		});
	},
    dayChange(dayInfo) {
		this.curr_day = dayInfo.date;
	  	this.getDayRecord(dayInfo.date)
    },
    monthChange(monthInfo) {
		let year_month = monthInfo.year + "-" + monthInfo.month;
		this.get_month_record(year_month)
    },

    clickbutton() {
      let selectedId = [];
      this.record_pictures.forEach((item) => {
        selectedId.push(item.id);
      });
      let data = {
        selectedId: selectedId,
        day: this.curr_day,
      };
      let params = encodeURIComponent(JSON.stringify(data));
      uni.navigateTo({
        url: "./selector?params=" + params,
      });
    },
    confirm() {
      console.log("123");
    },

  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.calendar {
  width: 100%;
}
</style>
